<template>
	<view>
		<view class="content" v-if="props.id">
			<image class="logo" :src="resImg(info)"></image>
			<view class="text-area">
				<text class="title">{{info.content}}</text>
			</view>
		</view>
		<uni-section title="操作" type="line" padding>
			<view class="example-body">
				<view class="tag-view">
					<uni-tag :text="'查看(' + info.viewCount + ')'" type="primary"　 @click="doShow"/>
				</view>
				<view class="tag-view">
					<uni-tag :text="'下载('+info.downCount+')'" type="royal"  @click="doDownload"/>
				</view>
				<view class="tag-view">
					<uni-tag :text="'收藏(' + info.favorCount+')'" type="success"  @click="doFavor"/>
				</view>
				<view class="tag-view">
					<uni-tag text="评价" type="warning"  @click="doFavor"/>
				</view>
			</view>
		</uni-section>

		<uni-section class="mb-10" title="资源信息" type="line">
			<uni-list>
				<uni-list-item title="资源名称" :rightText="info.name"></uni-list-item>
				<uni-list-item title="资源类型" :rightText="info.typeName"></uni-list-item>
				<uni-list-item title="资源栏目" :rightText="info.cateName"></uni-list-item>
				<uni-list-item title="作者" :rightText="info.userName"></uni-list-item>
				<uni-list-item title="上传时间" :rightText="info.uploadTime"></uni-list-item>
				<uni-list-item title="资源大小" :rightText="info.sizeStr"></uni-list-item>
				<uni-list-item title="格式" :rightText="info.exts"></uni-list-item>
			</uni-list>
		</uni-section>
	</view>
</template>

<script setup>
	import config from '@/config'
	import {
		ref
	} from "vue";
	import {
		getResource
	} from "@/api/resource.js"

	const info = ref(null);
	const props = defineProps({
		id: String,
	});

	function resImg(res) {
		if (res.thumb) {
			return config.baseUrl + '/profile/' + res.thumb;
		} else {
			return config.baseUrl + '/statics/images/none.jpg';
		}
	}


	function doView() {
		// #ifdef APP-PLUS
		window.open(config.baseUrl+'/res-detail/'+info.value.id);
		// #endif
		
		// #ifndef APP-PLUS
		window.open(config.baseUrl+'/res-detail/'+info.value.id);
		// #endif
	}
	
	function doFavor() {
		
	}
	function doDownload() {
		
	}
	
	getResource(props.id).then(res => {
		info.value = res.data;
	})
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}

	.example-body {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: flex-end;
		flex-wrap: wrap
	}

	.tag-view {
		margin-right: 10px
	}
</style>